<template>
  <el-upload
    ref="eluploadfile"
    :action="FileUrl"
    :multiple="isMultiple"
    :show-file-list="false"
    :data="Data"
    :auto-upload="isAutoUpload"
    :headers="httpHeaders"
    :before-upload="beforeAvatarUpload"
    :on-success="handleAvatarSuccess"
    :on-preview="handlePreviewFile"
    :on-change="handleChange"
  >
    <el-button size="small" type="primary">点击上传</el-button>
    <div class="el-upload__tip" slot="tip">
      <p>只能上传word文件</p>
      <a v-if="fileName" class="el-upload-list__item-name">
        <i class="el-icon-document"></i>
        {{fileName}}
      </a>
    </div>
  </el-upload>
</template>

<script>
import { getToken } from "@/utils/auth";
export default {
  name: "FileUpload",
  props: {
    Data: {
      type: Object
    },
    FileUrl: {
      type: String
    },
    handleAvatarSuccess: {
      type: Function
    },
    handleChange: {
      type: Function
    },
    isMultiple: {
      type: Boolean,
      default: true
    },
    fileName: {
      type: String,
      default: ""
    },
    isAutoUpload:{
       type:Boolean,
       default:false
    }
  },
  data() {
    return {
      httpHeaders: {
        Authorization: getToken()
      }
    };
  },
  methods: {
    // 上传前文件校验
    beforeAvatarUpload(file) {
      const isWord = file.type == "application/msword" || file.type == "application/vnd.openxmlformats-officedocument.wordprocessingml.document";
      const isLt5M = file.size / 1024 / 1024 < 5;
      if (!isWord) {
        this.$message.error("上传文件只能是word格式!");
      }
      if (!isLt5M) {
        this.$message.error("上传文件大小不能超过5MB!");
      }
      return isWord && isLt5M;
    },
    handlePreviewFile(file) {
     // console.log(file);
    },
    // 上传文件
    UploadSubmit() {
      this.$refs.eluploadfile.submit();
    },
    // 清除文件
    clearFiles() {
      this.$refs.eluploadfile.clearFiles();
    }
  }
};
</script>


